<!-- 分配运营商 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="分配运营商列表" name="one">
        <SearchTable ref="searchTableRef" :orderRentTypeList="orderRentTypeList" v-model:formStatus="formStatus" @handleAdd="handleAdd" @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="分配运营商详情" name="two">
        <FormTab :orderRentTypeList="orderRentTypeList" v-model:form="form" v-model:formStatus="formStatus" v-model:scheduleDate="scheduleDate" @handleInitData="clearData" @handleSuccess="handleSuccess" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="allocateOperator">
import SearchTable from "@/components/user/operatorManager/allocateOperator/SearchTable.vue";
import FormTab from "@/components/user/operatorManager/allocateOperator/FormTab.vue";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { TabsPaneContext } from "element-plus";
import { getGoodsOrderRentTypeList } from "@/utils/api/admin/goods/goods";
import type { IAllocateOperator, IOrderRentType } from "@/types/user/allocateOperator";

/* 租赁模式 */
const orderRentTypeList = ref<Array<IOrderRentType>>([]);

/* 表格状态 */
const formStatus = ref<ViewMode>("none");
/* 标签页切换 */
const activeName = ref<TabsMode>("one");
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
const form = reactive<IAllocateOperator>({
  id: 0,
  order_rent_type_id: "",
  merchant_operator_id: 0,
  merchant_operator_name: "",
  platform_commission_ratio: 0,
  merchant_operator_commission_ratio: 0,
  investor_investment_ratio: 0,
  start_time: 0,
  end_time: 0,
  create_time: 0,
  order_rent_type_name: ""
});
const scheduleDate = ref<Array<string>>([]);
/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  activeName.value = "one";
  formStatus.value = "none";
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}
/* 点击编辑按钮 */
function handleViewEdit(row: IAllocateOperator, code: ViewModeFilter) {
  nextTick(() => {
    form.id = row.id;
    form.order_rent_type_id = row.order_rent_type_id;
    form.merchant_operator_id = row.merchant_operator_id;
    form.merchant_operator_name = row.merchant_operator_name;
    form.platform_commission_ratio = row.platform_commission_ratio;
    form.merchant_operator_commission_ratio = row.merchant_operator_commission_ratio;
    form.investor_investment_ratio = row.investor_investment_ratio;
    form.start_time = Number(row.start_time) * 1000;
    form.end_time = Number(row.end_time) * 1000;
    scheduleDate.value = [new Date(Number(row.start_time) * 1000) + "", new Date(Number(row.end_time) * 1000) + ""];
    form.order_rent_type_name = row.order_rent_type_name;
    formStatus.value = code;
    activeName.value = "two";
  });
}

/* 获取租赁模式列表 */
function handleGetGoodsOrderRentTypeList() {
  getGoodsOrderRentTypeList<Array<IOrderRentType>, unknown>()
    .then(res => {
      orderRentTypeList.value = res.result;
    })
    .catch(() => {});
}
handleGetGoodsOrderRentTypeList();
</script>

<style lang="scss" scoped></style>
